<template>
  <div>
    <!-- <div></div> -->
    <div style="margin-top: 10px; background: #fff; display: flex">
      <div>
        <!-- <image fit="contain"  /> -->
        <img
          alt=""
          src="https://devapi.jbkl.com/storage/logo.jpg"
          style="margin-left: 10px"
          width="50px"
        />
      </div>
      <div
        style="
          text-align: center;
          width: 90%;
          line-height: 50px;
          font-size: 17px;
          color: #626b7d;
        "
      >
        创建店铺
      </div>
    </div>
    <div style="width: 70%; padding-top: 30px; margin-left: 15%">
      <div
        style="
          display: flex;
          font-size: 12px;
          margin-bottom: 10px;
          justify-content: space-evenly;
        "
      >
        <div
          :class="form.mec_type == 'clinic' ? 'itemTab' : 'tabs'"
          @click="form.mec_type = 'clinic'"
        >
          诊所机构
        </div>
        <div
          :class="form.mec_type == 'school' ? 'itemTab' : 'tabs'"
          @click="form.mec_type = 'school'"
        >
          教培机构
        </div>
      </div>
      <el-form
        ref="form"
        label-width="100px"
        :model="form"
        style="width: 70%; margin-left: 10%"
      >
        <div v-if="fb == 0">
          <el-form-item label="机构名称">
            <el-input v-model="form.mec_name" placeholder="请输入机构名称" />
          </el-form-item>
          <el-form-item label="机构联系人">
            <el-input
              v-model="form.mec_contacts"
              placeholder="请输入机构联系人"
            />
          </el-form-item>
          <el-form-item label="地址">
            <el-cascader
              v-model="baddress"
              :props="props"
              @change="cascaderChange"
            />
          </el-form-item>
          <el-form-item label="机构地址">
            <el-input v-model="form.mec_address" placeholder="请输入机构地址" />
          </el-form-item>
          <el-form-item label="机构电话">
            <el-input v-model="form.mec_tel" placeholder="请输入机构电话" />
          </el-form-item>
          <el-form-item label="客服电话">
            <el-input v-model="form.service_tel" placeholder="请输入客服电话" />
          </el-form-item>
          <el-form-item label="机构logo">
            <el-upload
              action="https://devapi.jbkl.com/api/upload_img"
              class="avatar-uploader"
              :on-error="uploadImgErr"
              :on-success="uploadImgSuc"
              :show-file-list="false"
            >
              <img
                v-if="imageUrl"
                class="avatar"
                :src="imageUrl"
                style="width: 100px"
              />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
                style="
                  width: 100px;
                  height: 100px;
                  line-height: 100px;
                  border: 1px solid #c0c4cc;
                "
              ></i>
            </el-upload>
          </el-form-item>
        </div>

        <div v-if="fb == 1">
          <el-form-item label="营业状态">
            <el-radio-group v-model="form.mec_status">
              <el-radio label="opening">营业</el-radio>
              <el-radio label="closed">歇业</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上午上班时间" style="margin-top: 20px">
            <el-time-picker
              v-model="form.morning_start_time"
              format="HH:mm"
              placeholder="上午上班时间"
              value-format="HH:mm"
            />
          </el-form-item>
          <el-form-item label="上午下班时间" style="margin-top: 20px">
            <el-time-picker
              v-model="form.morning_end_time"
              format="HH:mm"
              placeholder="上午下班时间"
              value-format="HH:mm"
            />
          </el-form-item>
          <el-form-item label="下午上班时间" style="margin-top: 20px">
            <el-time-picker
              v-model="form.afternoon_start_time"
              format="HH:mm"
              placeholder="下午上班时间"
              value-format="HH:mm"
            />
          </el-form-item>
          <el-form-item label="下午下班时间" style="margin-top: 20px">
            <el-time-picker
              v-model="form.afternoon_end_time"
              format="HH:mm"
              placeholder="下午下班时间"
              value-format="HH:mm"
            />
          </el-form-item>
          <el-form-item label="营业时间" style="margin-top: 20px">
            <el-checkbox-group
              v-model="checkTypeList"
              @change="handleCheckAllChange"
            >
              <el-checkbox
                v-for="(item, index) in sendTypeList"
                :key="index"
                :label="item.value"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button v-if="fb == 1" @click="fb = 0">上一步</el-button>
          <el-button v-else type="primary" @click="fb = 1">下一步</el-button>
          <el-button @click="goBack">返回</el-button>
          <div v-if="fb == 1" style="margin-top: 20px">
            <el-button :loading="showLoading" type="primary" @click="onSubmit">
              立即创建
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { getArea } from '@/api/level'
  import { mechanismAdd } from '@/api/mechanism'

  export default {
    props: {},
    data() {
      return {
        sendTypeList: [
          {
            value: '0',
            label: '星期天',
          },
          {
            value: '1',
            label: '星期一',
          },
          {
            value: '2',
            label: '星期二',
          },
          {
            value: '3',
            label: '星期三',
          },
          {
            value: '4',
            label: '星期四',
          },
          {
            value: '5',
            label: '星期五',
          },
          {
            value: '6',
            label: '星期六',
          },
        ],
        checkTypeList: [],
        showLoading: false,

        value1: '',
        form: {
          mec_type: window.localStorage.getItem('mec_type'),
          mec_status: 'opening',
          mec_name: '',
          mec_logo: 'https://devapi.jbkl.com/storage/logo.jpg',
          mec_contacts: '',
          mec_address: '',
          mec_tel: '',
          service_tel: '',
          morning_start_time: '08:00',
          morning_end_time: '12:00',
          afternoon_start_time: '13:00',
          afternoon_end_time: '17:00',
          work_week: '',
        },
        imageUrl: 'https://devapi.jbkl.com/storage/logo.jpg',
        baddress: '',
        workWeekOptions: [],
        props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const params = {
              pid: 0,
            }
            params.pid = node.value
            getArea(params).then((res) => {
              const arr = []
              res.data.forEach((e) => {
                arr.push({
                  value: e.id + '-' + e.name,
                  label: e.name,
                  leaf: e.level >= 3,
                })
              })
              resolve(arr)
            })
          },
        },
        fb: 0,
      }
    },
    watch: {},
    mounted() {
      // this.form.id = this.mcId
    },
    created() {},
    methods: {
      onSubmit() {
        const jy = {
          mec_name: '机构名称',
          mec_type: '机构类型',
          mec_logo: '机构logo',
          mec_contacts: '机构联系人',
          mec_address: '机构地址',
          mec_tel: '机构电话',
          service_tel: '客服电话',
          mec_status: '营业状态',
          morning_start_time: '上午上班时间',
          morning_end_time: '上午下班时间',
          afternoon_start_time: '	下午上班时间',
          afternoon_end_time: '	下午下班时间',
          work_week: '营业日期',
        }

        if (Object.keys(this.form).length === 0) {
          this.$message.error('请填写信息')
          return
        } else {
          for (var key in this.form) {
            if (this.form[key] == '' || this.form[key] == null) {
              this.$message.error(jy[key])
              return
            }
          }
        }
        this.showLoading = true
        mechanismAdd(this.form).then(() => {
          this.goBack()
        })
      },
      workWeekChange(e) {
        this.form.work_week = e.toString()
      },
      uploadImgSuc(res, file) {
        this.form.mec_logo = res.data
        this.imageUrl = URL.createObjectURL(file.raw)
        this.$message({
          message: '添加成功',
          type: 'success',
        })
      },
      uploadImgErr() {},
      // beforeUpload(file) {
      //   let _this = this
      //   const is1M = file.size / 1024 / 1024 < 1 // 限制小于1M
      //   const isSize = new Promise(function (resolve, reject) {
      //     let width = 100 // 限制图片尺寸为654X270
      //     let height = 100
      //     let _URL = window.URL || window.webkitURL
      //     let img = new Image()
      //     img.onload = function () {
      //       let valid = img.width === width && img.height === height
      //       valid ? resolve() : reject()
      //     }
      //     img.src = _URL.createObjectURL(file)
      //   }).then(
      //     () => {
      //       return file
      //     },
      //     () => {
      //       _this.$message.error('图片尺寸限制为100 x 100，大小不可超过1MB')
      //       return Promise.reject()
      //     }
      //   )
      //   if (!is1M) {
      //     _this.$message.error('图片尺寸限制为100 x 100，大小不可超过1MB')
      //   }
      //   return isSize & is1M
      // },
      handleCheckAllChange(e) {
        this.form.work_week = e.toString()
      },
      cascaderChange(e) {
        const a = e[0].split('-')
        const b = e[1].split('-')
        const c = e[2].split('-')
        this.form.province_name = a[1]
        this.form.city_name = b[1]
        this.form.region_name = c[1]
        this.form.province_id = a[0]
        this.form.city_id = b[0]
        this.form.region_id = c[0]
      },
      // 返回
      goBack() {
        this.$emit('showMain', 0)
      },
    },
  }
</script>

<style scoped>
  .itemTab {
    text-align: center;
    height: 38px;
    width: 100px;
    line-height: 38px;
    border-radius: 50px;
    color: #fff;
    background: #1890ff;
    cursor: pointer;
  }
  .tabs {
    text-align: center;
    height: 38px;
    width: 100px;
    line-height: 38px;
    border-radius: 50px;
    color: #fff;
    background: #626b7d;
    margin-bottom: 10px;
    cursor: pointer;
  }
</style>
